<template>
  <a-modal
    v-model="visible"
    title="编辑"
    @ok="handleOk"
    :confirm-loading="confirmLoading"
    :width="640"
    @cancel="$emit('update:visible', false)"
  >
    <div class="box">
      <div class="box-item" v-for="(item, index) in arr" :key="index">
        <div class="box-label">{{ item.label }}：</div>
        <div :style="index === 4 ? 'color:#6A66F6' : ''">{{ item.v }}</div>
      </div>
    </div>
    <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" style="margin-left: -18px">
      <a-form-item label="工作情况">
        <a-radio-group v-decorator="['entryStatus', { initialValue: '1' }]">
          <a-radio value="1"> 在职 </a-radio>
          <a-radio value="2"> 已离职 </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="离职日期" v-if="form.getFieldValue('entryStatus') == 2">
        <a-date-picker v-decorator="['leaveDate']" format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="核算情况">
        <a-radio-group v-decorator="['settlementStatus', { initialValue: '1', rules: [{ required: true, message: '' }] }]">
          <a-radio value="1"> 核算 </a-radio>
          <a-radio value="0"> 未核算 </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import moment from "moment";
import { putUpdateNotSiteID } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.arr[0].v = this.info.empName;
        this.arr[1].v = this.info.empMoneyReward;
        this.arr[2].v = this.info.grandReason;
        this.arr[3].v = this.info.moneyCount;
        this.arr[4].v = this.info.jobSeekerName;
        this.arr[5].v = this.info.postName;
      }
    }
  },
  data() {
    return {
      confirmLoading: false,
      form: this.$form.createForm(this, {}),
      arr: [
        { label: "内推人", v: "王小闲" },
        { label: "总赏金", v: "王小闲" },
        { label: "赏金获取原因", v: "王小闲" },
        { label: "已到手", v: "王小闲" },
        { label: "已投递", v: "王小闲" },
        { label: "内推职位", v: "王小闲" }
      ]
    };
  },
  methods: {
    moment,
    async onPutUpdateNotSiteID(v) {
      try {
        this.confirmLoading = true;
        await putUpdateNotSiteID(v);
        this.confirmLoading = false;
        this.$emit("update:visible", false);
        this.$emit("upDate");
      } catch (err) {
        this.confirmLoading = false;
        console.log("error log --> ", err);
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          values.leaveDate = moment(values.leaveDate).format("YYYY-MM-DD");
          values.id = this.info.deliverRecordId;
          this.onPutUpdateNotSiteID(values);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
  .box-item {
    width: 50%;
    margin-bottom: 24px;
    display: flex;
    .box-label {
      width: 35%;
      color: #767885;
    }
  }
}
.etextarea {
  margin-left: 18px;
}
</style>
